<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>DoitCSS V2.3 网格 - 实例</title>
	<meta http-equiv="X-UA-Compatible" content="IE=Edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="keywords" content="DoitCSS V1.0">
	<meta name="description" content="DoitCSS是根据bootstap改编的CSS框架">
	<!--基础-->
	<link href="../css/base.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--文字排版-->
	<link href="../css/typography.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--表格-->
	<link href="../css/tables.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--表单按钮-->
	<link href="../css/form-buttons.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--架构-->
	<link href="../css/layouts.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--元件-->
	<link href="../css/elements.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--图标-->
	<link href="../css/icons.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--菜单-->
	<link href="../css/navigation.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--分页-->
	<link href="../css/pagination.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--清除浮动-->
	<link href="../css/clear.css?ver=v2.3" rel="stylesheet" type="text/css">
</head>

<body>
<div class="container">
<fieldset class="mt20">
<legend>列表：</legend>
默认：UL:
<ul>
	<li>北京</li>
	<li>上海</li>
	<li>深圳</li>
</ul><br>
<mark>class ul</mark>
<ul class="ul">
	<li>北京</li>
	<li>上海</li>
	<li>深圳</li>
</ul><br>
OL:
<ol>
	<li>北京</li>
	<li>上海</li>
	<li>深圳</li>
</ol><br>
DL:
	<dl>
		<dt>标题</dt>
		<dd>内容</dd>
	</dl>
</fieldset>

<fieldset class="mt20">
<legend>行元素：</legend>
<mark>class row:</mark>
<div class="row">
	<ul>
		<li>北京</li>
		<li>上海</li>
		<li>深圳</li>
	</ul>
</div>
<br>

<div class="span bg-color-success">珊瑚海</div>
<div class="span bg-color-danger first">地中海</div>
<div class="span bg-color-warning last">黑海</div>
<div class="span bg-color-info">里海</div>

</fieldset>

<fieldset class="mt20">
<legend>自定义宽度：</legend>
	50px 为单位
	<div class="span width50 padding5 border bg-color-danger">50px</div>
	<div class="span width100 padding5 border bg-color-danger">100px;</div>
	<div class="span width150 padding5 border bg-color-danger">150px</div>
	<div class="span width200 padding5 border bg-color-danger">200px</div>
	<hr class="clear">
	60px 为单位
	<div class="span width60 padding5 border bg-color-success">60px</div>
	<div class="span width120 padding5 border bg-color-success">120px;</div>
	<div class="span width180 padding5 border bg-color-success">180px</div>
	<div class="span width240 padding5 border bg-color-success">240px</div>
	<hr class="clear">
	120px 为单位
	<div class="span width120 padding5 border bg-color-danger">120px</div>
	<div class="span width240 padding5 border bg-color-danger">240px;</div>
	<div class="span width360 padding5 border bg-color-danger">360px</div><br>
	<div class="span width480 padding5 border bg-color-danger">480px</div>
	<hr class="clear">

</fieldset>
</div>
</body>
</html>